<script setup>
import { ref,onMounted } from 'vue';
import { addStudentApi,getStudentListApi,getStudentNameApi,updateStudentApi,deleteStudentApi } from "../../api/student.js";


// 假设需要一些数据或方法，这里仅做示例
const studentList = ref([
]);
const addStudentDialogVisible = ref(false);
const editStudentDialogVisible = ref(false);
const deleteStudentDialogVisible = ref(false);
const StudentData = ref({
  name: '',
  age: '',
  gender: '',
  department: '',
});
const StudentDataEditor = ref({});
const StudentDataDelete=ref({})

const getStudentList = async ()=>{
  const {data:res} = await getStudentListApi();
  studentList.value = res.data
  console.log(studentList.value)
};
const addStudent = async() => {
  // 添加学生逻辑
  addStudentDialogVisible.value = false;
  const {data:res} = await addStudentApi(StudentData.value)
  // studentList.value=res.data
  console.log(res.data)
  if(res.code == 200){
    ElMessage.success('添加成功')
    getStudentList();
  }else {
    ElMessage.error('添加失败')
  }
  getStudentList()
};

const Edit = async () => {
  // 编辑学生逻辑
  editStudentDialogVisible.value = false;
  // console.log(StudentDataEditor.value)
  const {data:res} = await updateStudentApi(StudentDataEditor.value.value)
  if (res.code == 200){
    ElMessage.success('编辑成功')
    getStudentList();
  }
};

const userDelete = async () => {
  // 删除学生逻辑
  deleteStudentDialogVisible.value = false;
  const {data:res} = await deleteStudentApi(StudentDataDelete.value.value.id)
  if (res.code == 200){
    ElMessage.success('删除成功')
    getStudentList();
  }
};

const Reset = () => {
  // 重置搜索逻辑

};

const Search = () => {
  // 搜索逻辑
};
onMounted(()=>{
  getStudentList();
})
</script>

<template>
  <div>
    <el-card>
      <el-row>
        <!-- 搜索框 --->
        <el-col :span="5">
          <el-form :model="searchName" label-width="80px">
            <el-form-item label="学生名称">
              <el-input v-model="searchName" placeholder="请输入学生名称" />
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="5">
          <el-form :model="searchDepartment" label-width="80px">
            <el-form-item label="系别">
              <el-input v-model="searchDepartment" placeholder="请输入系别" />
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Search" style="margin-left: 20px">搜索</el-button>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Reset">重置</el-button>
        </el-col>

        <el-col :span="10">
          <el-form></el-form>
        </el-col>
      </el-row>
      <!-- 操作 --->
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addStudentDialogVisible = true">添加学生</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="DeleteAll">批量删除</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">更多操作</el-button>
        </el-col>
        <el-col :span="18">
          <el-form></el-form>
        </el-col>
      </el-row>

      <!-- 学生列表 --->
      <el-card style="margin-top: 20px">
        <el-table :data="studentList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="age" label="年龄" />
          <el-table-column prop="gender_display" label="性别" />
          <el-table-column prop="department" label="系别" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="editStudentDialogVisible = true;StudentDataEditor.value={...scope.row}">
                编辑
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  plain
                  @click="deleteStudentDialogVisible=true;StudentDataDelete.value={...scope.row}"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <!-- 添加学生对话框 -->
    <el-dialog title="添加学生" v-model="addStudentDialogVisible" width="30%">
      <el-form :model="StudentData">
        <el-form-item label="姓名" label-width="120px">
          <el-input v-model="StudentData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="120px">
          <el-input v-model="StudentData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="120px">
          <el-select v-model="StudentData.gender" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系别" label-width="120px">
          <el-input v-model="StudentData.department"></el-input>
        </el-form-item>
        <!-- 其他表单项... -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addStudentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addStudent">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑学生对话框 -->
    <el-dialog title="编辑学生" v-model="editStudentDialogVisible" width="30%">
      <el-form :model="StudentDataEditor">
        <el-form-item label="姓名" label-width="120px">
          <el-input v-model="StudentDataEditor.value.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="120px">
          <el-input v-model="StudentDataEditor.value.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="120px">
          <el-select v-model="StudentDataEditor.value.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系别" label-width="120px">
          <el-input v-model="StudentDataEditor.value.department"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editStudentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Edit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除学生对话框 -->
    <el-dialog title="提示" v-model="deleteStudentDialogVisible" width="30%">
      <el-form>
        <el-form-item label="确定删除该学生吗？" label-width="120px">
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteStudentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="userDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
